<template>
  <div class="login">
    <Row type="flex" justify="center" class="login-row">
      <Col span="8">
        <Layout>
          <Content class="login-content">
            <Card class="form-card">
              <h1 class="title">欢迎使用</h1>
              <Divider />
              <Form ref="loginForm" :model="form" :rules="validateRules" :label-width="80">
                <FormItem label="用户名" prop="username">
                  <Input v-model="form.username" placeholder="请输入用户名"></Input>
                </FormItem>
                <FormItem label="密码" prop="password">
                  <Input type="password" v-model="form.password" placeholder="请输入密码"></Input>
                </FormItem>
                <FormItem label prop="g">
                  <RadioGroup v-model="form.g">
                    <Radio :label="1">仅前端</Radio>
                    <Radio :label="2">发送给后端</Radio>
                  </RadioGroup>
                </FormItem>
                <FormItem label="IP地址" prop="ip" v-show="form.g === 2">
                  <Input v-model="form.ip" placeholder="请输入后端IP地址"></Input>
                </FormItem>
                <FormItem>
                    <Button size="large" class="button" type="primary" @click="handleSubmit('loginForm')">登录</Button>
                    <Button size="large" class="button" @click="handleReset('loginForm')">重置</Button>
                </FormItem>
              </Form>
            </Card>
          </Content>
        </Layout>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      form: {
        username: "",
        password: "",
        g: 1,
        ip: "127.0.0.1"
      },
      validateRules: {
          username: [
              {required: true, message: "用户名不能为空"}
          ],
          password: [
              {required: true, message: "密码不能为空"}
          ],
          ip: [
              {required: true, message: "IP地址不能为空"}
          ]
      }
    };
  },
  methods: {
      handleSubmit(name) {
          this.$refs[name].validate(valid => {
              if(valid) {
                  this.$router.push("/home");
              }else {
                  this.$Message.warning("登录失败");
              }
          });
      },
      handleReset(name) {
          this.$refs[name].resetFields();
      }
  },
};
</script>

<style scoped>
.login {
    height: 100%;
    display: flex;
    align-items: center;
}
.login-row {
    flex: 1;
}
.login-content {
    background-color: #eeeeee;
}
.form-card {
    border-radius: 30px;
    width: 400px;
}
.title {
    text-align: center;
    color: #464c5b;
}
.button {
    margin-right: 8px;
    width: 80px;
}
</style>